<template>
  <div>
    <el-form ref="changeForm" :model="changeForm" label-width="80px" class="change-box">
      <h3 class="change-title">设定新密码</h3>

      <el-form-item label="用户" prop="user">
        <el-input type="text" disabled="true" v-model="changeForm.user"/>
      </el-form-item>

      <el-form-item label="输入密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="changeForm.password"/>
      </el-form-item>

      <el-form-item label="确定密码" prop="confirmPass">
        <el-input type="password" placeholder="请确认密码" v-model="changeForm.confirmPass"/>
      </el-form-item>

      <el-form-item>
        <el-space wrap :size="100">
          <el-button type="primary" v-on:click="onConfirm()">确定</el-button>
          <el-button type="warning" v-on:click="onReturn()">返回</el-button>
        </el-space>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import router from "@/router";
import {ElMessage} from "element-plus";
import request from "@/util/request";

export default {
  name: "Changepass",
  data() {
    return{
      changeForm: {
        user: this.$cookies.get("user"),
        // user: '',
        password:'',
        confirmPass:''
      }
    }
  },
  methods: {
    onConfirm() {
      //判断两次密码输入是否一致 -> 发送用户名和新密码到服务端
      //url未填充
      if (this.changeForm.password.toString() !== this.changeForm.confirmPass.toString()) {
        ElMessage.error('两次输入密码不一致')
      } else {
        let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        };
        let formData = new FormData();
        formData.append("user", this.$cookies.get("user"));
        formData.append("password", this.changeForm.password);
        this.$axios.post('http://localhost:8090/register/reset', {
          //验证type的正确性，还没验证
          type:this.$cookies.get("type"),
          name: this.$cookies.get("user"),
          password:this.changeForm.password,
        }).then(response => {
          if (response.data.code === "200") {
            ElMessage({
              message: '设定成功，即将返回登录界面',
              type: 'success'
            })
            router.push("/")
          } else {
            ElMessage.error('设定失败')
          }
        })
      }
    },
    onReturn() {
      router.push('/retrieval')
    }
  }
}
</script>

<style scoped>
.change-box {
  border: 1px solid #DCDFE6;
  width: 400px;
  margin: 120px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  box-shadow: 0px 0 25px black;
  background-color: white;
}
.change-title {
  text-align: center;
  margin: 0 auto 30px auto;
  color: #303133;
}
</style>
